<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul {
			margin: 10px;
			list-style: none;
			width: 50px;
			height: 50px;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			border: 1px solid gray;
			border-radius: 8px;
			padding: 4px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: space-around;
			justify-content: space-around;
		}

		li>span {
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 10px;
			background-color: blue
		}

		.dice1 {
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.dice1>li>span {
			width: 20px;
			height: 20px;
			border-radius: 20px;
			background-color: red;
		}

		.dice2 {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-flex-wrap: nowrap;
			flex-wrap: nowrap;
		}

		.dice3>li {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-align-self: center;
			align-self: center;
		}

		.dice3>li:first-of-type {
			-webkit-align-self: flex-start;
			align-self: flex-start;
		}

		.dice3>li:last-of-type {
			-webkit-align-self: flex-end;
			align-self: flex-end;
		}

		.dice4,
		.dice5,
		.dice6 {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-align-content: space-around;
			align-content: space-around;
		}

		.dice4>li,
		.dice5>li,
		.dice6>li {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: space-around;
			justify-content: space-around;
		}

		.dice4>li>span {
			background-color: red;
		}

		.dice5>li:nth-of-type(2) {
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		}
	</style>
</head>

<body>
	<ul class="dice1">
		<li>
			<span></span>
		</li>
	</ul>
	<ul class="dice2">
		<li>
			<span></span>
		</li>
		<li>
			<span></span>
		</li>
	</ul>
	<ul class="dice3">
		<li>
			<span></span>
		</li>
		<li>
			<span></span>
		</li>
		<li>
			<span></span>
		</li>
	</ul>
	<ul class="dice4">
		<li>
			<span></span>
			<span></span>
		</li>
		<li>
			<span></span>
			<span></span>
		</li>
	</ul>
	<ul class="dice5">
		<li>
			<span></span>
			<span></span>
		</li>
		<li>
			<span></span>
		</li>
		<li>
			<span></span>
			<span></span>
		</li>
	</ul>
	<ul class="dice6">
		<li>
			<span></span>
			<span></span>
		</li>
		<li>
			<span></span>
			<span></span>
		</li>
		<li>
			<span></span>
			<span></span>
		</li>
	</ul>
</body>

</html>